<template>
	<div class="view_main">
		<Groups @setDataObject="setDataObject" :feeds="feeds" :isShowAll="isShowAll" len="1"></Groups>
		<div class="view_main_qrcode">
			<div class="view_main_qrcode_tip">分享当前网址二维码</div>
			<div id="qrCode" ref="qrCodeDivA" class="view_main_qrcode_img"></div>
			<div class="view_main_qrcode_tip">请在确保安全环境下扫描</div>
		</div>
		<div class="aside_news_view">
			<h1 class="aside_news_view_header">相关新闻</h1>
			<AsideNews @setDataObject="setDataObject" :feeds="asideFeeds" @getNewsContent="getNewsContent"></AsideNews>
		</div>
		<img :src="countprops" style="border:0px;width:0px;height:0px;overflow:hidden;opacity:.1;display:none;" />
	</div>
</template>
<script>
	import Axios from "axios";
	import qs from "Qs";
	import QRCode from 'qrcodejs2';
	export default {
		name: 'newsview',
		data: function(){
			return {
				feeds:[],
				asideFeeds:[],
				isShowAll: true,
				countprops: ""
			}
		},
		components:{
			Groups: r => require.ensure([], () => r(require('../components/groups.vue')), 'groups'),
			AsideNews: r => require.ensure([], () => r(require('../components/asidenews.vue')), 'aside_news')
		},
		mounted:function(){
			this.$set(this, "countprops", this.$store.state.api.getCountProps.tmpl({
				channel:this.$route.params.channel,
				id:this.$route.params.id,
				day: this.$route.params.day
			}));
			const that = this;
			that.$emit("setDataObject", {type:'view', title:'详情', showTip:false});
			that.getNewsContent();
			new QRCode(this.$refs.qrCodeDivA, {
				text: window.location.href,
				width: 160,
				height: 160,
				colorDark: "#333333", //二维码颜色
				colorLight: "#ffffff", //二维码背景色
				correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
			})
		},
		methods:{
			setDataObject(v){
				this.$emit("setDataObject", v);
			},
			getNewsContent(){
				const params = this.$router.history.current.params;
				const that = this;
				new Promise((a, b) => {
					Axios.post(this.$store.state.api.getNewsContent, qs.stringify(params)).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							that.$set(that, "feeds", res.data.data)
							a(res.data.data[0].title)
						}else{
							b()
						}
					}).catch((err) => {
						b(err)
					})
				}).then((v) => {
					that.getGroupsList(v, params.day, "asideFeeds")
				}, () => {
					that.$router.push("/nodata")
				})
			},
			getGroupsList:function(v, day, name){
				const that = this;
				that.$nextTick(() => {
					Axios.post(this.$store.state.api.getSearchNews, qs.stringify({
						key: v,
						day: day.split('-').join('')
					})).then((res) => {
						console.log(res)
						if (res.data.status === 1){
							that.$set(that, name, res.data.data);
						}else{

						}
					}).catch((err) => {

					})
				})
			}
		}
	}
</script>
<style lang="less">
	@base:23.44/1rem;
	.view_main{
		margin:70/@base 0 0;
		.view_main_qrcode{
			padding:10/@base 0;
			.view_main_qrcode_tip{
				font-size: 20/@base;
				color:#999;
				text-align: center;
				padding:5/@base 0 10/@base 0;
			}
			.view_main_qrcode_img{
				text-align: center;
				img{
					margin:10/@base auto;
					background-color: #fff;
					padding:10/@base;
				}
			}
			border-bottom:1/@base solid #efefef;
		}
		.aside_news_view{
			h1{
				&.aside_news_view_header{
					font-size:26/@base;
					padding:20/@base;
					font-weight: 400;
				}
			}
		}
	}
</style>